<template>
  <div className="EchartPractice">
    <div id="main"></div>
  </div>
</template>

<script>

export default {
  name: "EchartPractice",
  methods: {
    drawGraph() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      let option = {
        title: {
          text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
        series: [
        {
          type: 'graph',
          layout: 'none',
          symbolSize: 50,
          roam: true,
          label: {
            show: true
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          data: [
            {
              name: 'Node 1',
              x: 300,
              y: 300
            },
            {
              name: 'Node 2',
              x: 800,
              y: 300
            },
            {
              name: 'Node 3',
              x: 550,
              y: 100
            },
            {
              name: 'Node 4',
              x: 550,
              y: 500
            }
          ],
          // links: [],
          links: [
            {
              source: 0,
              target: 1,
              symbolSize: [5, 20],
              label: {
                show: true
              },
              lineStyle: {
                width: 5,
                curveness: 0.2
              }
            },
            {
              source: 'Node 2',
              target: 'Node 1',
              label: {
                show: true
              },
              lineStyle: {
                curveness: 0.2
              }
            },
            {
              source: 'Node 1',
              target: 'Node 3'
            },
            {
              source: 'Node 2',
              target: 'Node 3'
            },
            {
              source: 'Node 2',
              target: 'Node 4'
            },
            {
              source: 'Node 1',
              target: 'Node 4'
            }
          ],
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
          }
        }
      ]
      }

      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawGraph();
  }
}

</script>

<style scoped>
#main {
  width: 700px;
  height: 700px;
  margin: auto;
  margin-top: 100px
}
</style>
